import React, { memo, useEffect, useState, useCallback } from 'react'

import { 
  getBanners, 
  getHotRecommend, 
  getNewAlbums, 
  getTopList
} from '@/services/discover'

import {
  HOT_RECOMMEND_LIMIT,
  UPRANKING_IDX,
  NEWRANKING_IDX,
  ORIGINRANKING_IDX
} from '@/common/constants'

import { RecommendWrap } from './style'

import Banners from './banners'
import HotRecommend from './hot-recommend'
import NewAlbum from './new-album'
import Ranking from './ranking'
import UserLogin from './user-login'

export default memo(function Recommend() {
  const [banners, setBanners] = useState([])
  const [hotRecommend, setHotRecommend] = useState([])
  const [albums,setAlbums] = useState([])
  const [upRanking,setUpRanking] = useState({})
  const [newRanking,setNewRanking] = useState({})
  const [originRanking,setOriginRanking] = useState({})
  const [currentIndex, setCurrentIndex] = useState(0)

  useEffect(() => {
    // 请求轮播图数据
    getBanners().then(res => {
      setBanners(res.banners)
    })

    // 请求热门推荐数据
    getHotRecommend(HOT_RECOMMEND_LIMIT).then(res => {
      setHotRecommend(res.result)
    })

    // 请求榜单数据
    getNewAlbums().then(res =>{
      setAlbums(res.albums)
    })

    // 获取榜单数据
    getTopList(UPRANKING_IDX).then(res => {
      //飙升榜
      setUpRanking(res.playlist)
    })

    getTopList(NEWRANKING_IDX).then(res => {
      // 新歌榜
      setNewRanking(res.playlist)
    })

    getTopList(ORIGINRANKING_IDX).then(res => {
      // 原创榜
      setOriginRanking(res.playlist)
    })

  }, [])

  const setBgImage = useCallback((index) => {
    setCurrentIndex(index)
  }, [])

  const bgImage = banners[currentIndex] && (banners[currentIndex].imageUrl + "?imageView&blur=40x20")

  return (
    <RecommendWrap bg={bgImage}>
      <div className="banner-wrap">
        <div className="wrap-v2">
          <Banners banners={banners} setBgImage={setBgImage} />
        </div>
      </div>
      <div className="content wrap-v2">
        <div className="content-left">
          <HotRecommend hotRecommend={hotRecommend} />
          <NewAlbum albums={albums} />
          <Ranking upRanking={upRanking} newRanking={newRanking} originRanking={originRanking} />
        </div>
        <div className="content-right">
          <UserLogin />
        </div>
      </div>
    </RecommendWrap>
  )
})
